<template>
  <div class="chartt">
    <el-row :gutter="20">
      <el-col :span="4">
        <div style="height:1000px" class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="8">
        <chart-view
          class="chart-content1 grid-content bg-purple-light"
          :chart-option="chartOpt"
          :auto-resize="true"
          height="100%"
        ></chart-view>
      </el-col>
      <el-col :span="12">
        <chart-view
          class="chart-content2 grid-content bg-purple-light"
          :chart-option="testLine"
          :auto-resize="true"
        ></chart-view>
      </el-col>
      <el-col :span="8">
        <chart-view
          class="chart-content1 grid-content bg-purple-light"
          :chart-option="chartOpt"
          :auto-resize="true"
          height="100%"
        ></chart-view>
      </el-col>
      <el-col :span="12">
        <chart-view
          class="chart-content2 grid-content bg-purple-light"
          :chart-option="testLine"
          :auto-resize="true"
        ></chart-view>
      </el-col>
      <el-col :span="7">
        <chart-view
          class="chart-content1 grid-content bg-purple-light"
          :chart-option="chartOpt"
          :auto-resize="true"
          height="100%"
        ></chart-view>
      </el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "chartTestView",
  data() {
    return {
      chartOpt: {},
      testLine: {},
    };
  },
  mounted() {},
  created() {
    this.chartOpt = this.$eChartFn.testBar();
    this.testLine = this.$eChartFn.testLine();
  },
  methods: {},
  watch: {},
};
</script>

<style  scoped>
.chartt {
  width: 100%;
  border: 1px solid red;
  /* display: flex; */
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple-light {
  background: #e5e9f2;
}
</style>